<template>
    <div class="bg">
        <div class="head">
            <div class="weather"><span id="showTime">{{nowTime}}</span></div>
            <h1 @click="to" class="to">
                企业营收大数据统计
            </h1>
        </div>

        <div class="mainbox">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="height:400px;">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall" id="echart5"></div>
                    </div>
                    <div class="boxall" style="height:260px;">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall">
                            <div class="wraptit">
                                <span>单号</span><span>金额</span><span>品名</span><span>时间</span>
                            </div>
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>
                                    <li>
                                        <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
                                    </li>

                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="boxall" style="height:260px;">
                        <div class="alltitle">标题样式</div>

                        <div class="navboxall" id="echart1"></div>
                    </div>
                </li>
                <li>

                    <div class="boxall" style="height:230px">
                        <div class="clearfix navboxall" style="height: 100%">
                            <div class="pulll_left num">
                                <div class="numbt">总体情况<span>(单位：元)</span></div>
                                <!-- <div class="numtxt">19382721 </div> -->
                                <countTo class="numtxt" :startVal='startNum' :endVal='endNum' :duration='3000'></countTo>
                            </div>
                            <div class="pulll_right zhibiao">
                                <div class="zb1"><span>标题样式</span>
                                    <div id="zb1"></div>
                                </div>
                                <div class="zb2"><span>标题样式</span>
                                    <div id="zb2"></div>
                                </div>
                                <div class="zb3"><span>标题样式</span>
                                    <div id="zb3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="boxall" style="height:350px">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall" id="echart4"></div>

                    </div>
                    <div class="boxall" style="height:340px">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall" id="echart3"></div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height:300px">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th scope="col">排名</th>
                                        <th scope="col">公司</th>
                                        <th scope="col">数量</th>
                                        <th scope="col">增长率</th>
                                    </tr>
                                    <tr>
                                        <td><span>1</span></td>
                                        <td>腾讯科技</td>
                                        <td>114万<br></td>
                                        <td>100%<br></td>
                                    </tr>
                                    <tr>
                                        <td><span>2</span></td>
                                        <td>百度公司</td>
                                        <td>923823万</td>
                                        <td>21%</td>
                                    </tr>

                                    <tr>
                                        <td><span>3</span></td>
                                        <td>新浪</td>
                                        <td>1240253万</td>
                                        <td>12%</td>
                                    </tr>
                                    <tr>
                                        <td><span>4</span></td>
                                        <td>网易</td>
                                        <td>1.2亿</td>
                                        <td>39%</td>
                                    </tr>
                                    <tr>
                                        <td><span>5</span></td>
                                        <td>雅虎</td>
                                        <td>13423万</td>
                                        <td>9%</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="boxall" style="height: 300px">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th scope="col">排名</th>
                                        <th scope="col">公司</th>
                                        <th scope="col">数量</th>
                                        <th scope="col">增长率</th>
                                    </tr>
                                    <tr>
                                        <td><span>1</span></td>
                                        <td>腾讯科技</td>
                                        <td>114万<br></td>
                                        <td>100%<br></td>
                                    </tr>
                                    <tr>
                                        <td><span>2</span></td>
                                        <td>百度公司</td>
                                        <td>923823万</td>
                                        <td>21%</td>
                                    </tr>

                                    <tr>
                                        <td><span>3</span></td>
                                        <td>新浪</td>
                                        <td>1240253万</td>
                                        <td>12%</td>
                                    </tr>
                                    <tr>
                                        <td><span>4</span></td>
                                        <td>网易</td>
                                        <td>1.2亿</td>
                                        <td>39%</td>
                                    </tr>
                                    <tr>
                                        <td><span>5</span></td>
                                        <td>雅虎</td>
                                        <td>13423万</td>
                                        <td>9%</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>

                    </div>

                    <div class="boxall" style="height:320px">
                        <div class="alltitle">标题样式</div>
                        <div class="navboxall" id="echart2"></div>
                    </div>


                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import countTo from 'vue-count-to';
    export default {
        data() {
            return {
                nowTime: '',
                startNum: 0,
                endNum: 19382721
            }
        },
        components: {
            countTo
        },
        created() {
            this.nowTimes()
        },
        methods: {
            //显示当前时间（年月日时分秒）
            timeFormate(timeStamp) {
                let year = new Date(timeStamp).getFullYear();
                let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
                    new Date(timeStamp).getMonth() + 1;
                let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(
                    timeStamp).getDate();
                let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(
                    timeStamp).getHours();
                let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(
                    timeStamp).getMinutes();
                let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(
                    timeStamp).getSeconds();
                let week = new Date(timeStamp).getDay();
                let weeks = ["日", "一", "二", "三", "四", "五", "六"];
                let getWeek = "星期" + weeks[week];
                this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ':' + ss + getWeek;
            },
            nowTimes() {
                this.timeFormate(new Date());
                setInterval(this.nowTimes, 1000);
                this.clear()
            },
            clear() {
                clearInterval(this.nowTimes)
                this.nowTimes = null;
            },
            to() {
                let routeData = this.$router.resolve({
                    name: "data",
                    // query: params,
                    // params: {
                    //     catId: params.catId
                    // }
                });
                window.open(routeData.href, '_blank');
            }
        }
    }
</script>
<style scoped>
    @charset "utf-8";

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    *,
    body {
        padding: 0px;
        margin: 0px;
        color: #222;
        font-family: "微软雅黑";
    }

    body {
        color: #666;
        font-size: 16px;
    }

    li {
        list-style-type: none;
    }

    table {}

    i {
        margin: 0px;
        padding: 0px;
        text-indent: 0px;
    }

    img {
        border: none;
        max-width: 100%;
    }

    a {
        text-decoration: none;
        color: #399bff;
    }

    a.active,
    a:focus {
        outline: none !important;
        text-decoration: none;
    }

    ol,
    ul,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0;
        margin: 0
    }

    a:hover {
        color: #06c;
        text-decoration: none !important
    }

    .to {
        cursor: pointer;
    }

    .bg {
        background: #000d4a url(./images/bg.jpg) center top;
        padding: 0px;
        margin: 0px;
        color: #222;
        box-sizing: border-box;
        font-size: 16px;
    }

    .clearfix:after,
    .clearfix:before {
        display: table;
        content: " "
    }

    .clearfix:after {
        clear: both
    }

    .pulll_left {
        float: left;
    }

    .pulll_right {
        float: right;
    }


    .loading {
        position: fixed;
        left: 0;
        top: 0;
        font-size: 16px;
        z-index: 100000000;
        width: 100%;
        height: 100%;
        background: #1a1a1c;
        text-align: center;
    }

    .loadbox {
        position: absolute;
        width: 160px;
        height: 150px;
        color: rgba(255, 255, 255, .6);
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -75px;
    }

    .loadbox img {
        margin: 10px auto;
        display: block;
        width: 40px;
    }

    .head {
        height: 105px;
        background: url(./images/head_bg.png) no-repeat center center;
        position: relative
    }

    .head h1 {
        color: #fff;
        text-align: center;
        font-size: 42px;
        line-height: 90px;
        ;
    }

    .head h1 img {
        width: 1.5rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: .2rem
    }

    .weather {
        position: absolute;
        right: 30px;
        top: 0;
        line-height: 70px;
    }

    .weather span {
        color: rgba(255, 255, 255, .9) !important;
        font-size: 24px;
    }

    .mainbox {
        padding: 10px 20px 0 20px;
    }

    .mainbox>ul {
        margin-left: -.4rem;
        margin-right: -.4rem;
    }

    .mainbox>ul>li {
        float: left;
        padding: 0 .4rem
    }

    .mainbox>ul>li {
        width: 24%
    }

    .mainbox>ul>li:nth-child(2) {
        width: 52%
    }

    .boxall {
        padding: 15px;
        background: rgba(0, 0, 0, .2);
        position: relative;
        margin-bottom: 15px;
        ;
        z-index: 10;
    }

    .alltitle {
        font-size: 18px;
        color: #fff;
        position: relative;
        padding-left: 12px;
        margin-bottom: 10px;
    }

    .alltitle:before {
        width: 5px;
        height: 20px;
        top: 2px;
        position: absolute;
        content: "";
        background: #49bcf7;
        border-radius: 20px;
        left: 0;
    }

    .navboxall {
        height: calc(100% - 30px);
    }

    .num,
    .zhibiao {
        height: 100%;
        width: 50%;
    }

    .zb1,
    .zb2,
    .zb3 {
        float: left;
        width: 33.3333%;
        height: 100%;
    }

    #zb1,
    #zb2,
    #zb3 {
        height: calc(100% - 30px);
    }

    .zhibiao span {
        padding-top: 20px;
        display: block;
        text-align: center;
        color: #fff;
        font-size: 16px;
    }

    .num {
        padding-right: 20px;
    }

    .numbt {
        font-size: 24px;
        color: #fff;
        padding-top: 14px;
    }

    .numbt span {
        font-size: 18px;
        padding-left: 10px;
        color: #fff;
    }

    .numtxt {
        color: #fef000;
        font-size: 80px;
        font-family: arial;
        border-top: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        padding: 10px 0;
        margin: 18px 0;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .table1 th {
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        font-size: 16px;
        color: rgba(255, 255, 255, .6);
        font-weight: normal;
        padding: 0 0 10px 0;
    }

    .table1 td {
        font-size: 16px;
        color: rgba(255, 255, 255, .4);
        padding: 15px 0 0 0;
    }

    .table1 span {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        display: block;
        background: #878787;
        color: #fff;
        line-height: 24px;
        text-align: center;
    }

    .table1 tr:nth-child(2) span {
        background: #ed405d
    }

    .table1 tr:nth-child(3) span {
        background: #f78c44
    }

    .table1 tr:nth-child(4) span {
        background: #49bcf7
    }

    .iconchart li {
        height: 30px;
    }

    .iconchart label {
        color: #fff;
        line-height: 30px;
        height: 30px;
        display: inline-block;
        opacity: .8;
    }

    .iconchart label img {
        display: inline-block;
        vertical-align: middle;
        opacity: .4;
    }

    .iconchart .bar {
        display: inline-block;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .2);
        width: 78%;
        height: 20px;
        padding: 2px;
        position: relative;
        top: 5px;
    }

    .iconchart .bar span {
        background: linear-gradient(to right, #588fab, #5ea99c);
        display: block;
        width: 60%;
        height: 100%;
        animation: myfirst2 1s ease;
    }

    .iconchart .bar i {
        position: absolute;
        opacity: .5;
        right: -36px;
        color: #fff;
        line-height: 20px;
        top: 0;
    }

    /*Plugin CSS*/
    .wrap {
        height: 82%;
        overflow: hidden;
    }

    .wrap li {
        line-height: 40px;
        height: 40px;
    }

    .wrap li p,
    .wraptit {
        font-size: 0;
    }

    .wrap li span,
    .wraptit span {
        display: inline-block;
        font-size: 18px;
        color: rgba(255, 255, 255, .6);
    }

    .wraptit {
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        padding: 0 0 10px 0;
        margin-bottom: 10px;
    }

    .wrap li span:nth-child(1),
    .wraptit span:nth-child(1) {
        width: 30%
    }

    .wrap li span:nth-child(2),
    .wraptit span:nth-child(2) {
        width: 20%
    }

    .wrap li span:nth-child(3),
    .wraptit span:nth-child(3) {
        width: 20%
    }

    .wrap li span:nth-child(4),
    .wraptit span:nth-child(4) {
        width: 30%
    }

    .str_wrap {
        overflow: hidden;
        width: 100%;
        position: relative;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        white-space: nowrap;
    }


    .str_move {
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
    }

    .str_move_clone {
        display: inline-block;
        vertical-align: top;
        position: absolute;
        left: 100%;
        top: 0;
    }

    .str_vertical .str_move_clone {
        left: 0;
        top: 100%;
    }

    .str_down .str_move_clone {
        left: 0;
        bottom: 100%;
    }

    .str_vertical .str_move,
    .str_down .str_move {
        white-space: normal;
        width: 100%;
    }

    .str_static .str_move,
    .no_drag .str_move,
    .noStop .str_move {
        cursor: inherit;
    }

    .str_wrap img {
        max-width: none !important;
    }

    @keyframes myfirst2 {
        from {
            width: 0
        }

        to {}
    }
</style>